<template>
  <div>
    <div id="bottomRightChart" style="width:11.25rem;height:6rem;"></div>
  </div>
</template>

<script>
import "../../../common/china"
const echarts = require("echarts");
export default {
  data() {
    return {};
  },
  mounted() {
    this.drawPie();
    this.charTimg();
  },
  methods: {
    charTimg() {
      setInterval(() => {
        this.drawPie();
      }, 30000);
    },
    async drawPie() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(
        document.getElementById("bottomRightChart")
      );
      //  ----------------------------------------------------------------
      // 数据

      const res = await this.$http.get('/top/provinces/dau')

      let mydata = res;
      let  option = {
        title: {
          text: '日活跃用户总数:'+this.$store.state.dauTitle,
          subtext: '',
          x:'center',
          textStyle: {
            color: '#BBB',
          },
        },
        tooltip : {
          trigger: 'item'
        },

        //左侧小导航图标
        visualMap: {
          show : true,
          x: 'left',
          y: 'center',
          textStyle: {
            color: '#BBB',
          },
          splitList: [
            {start: 50000, end: 100000},
            {start: 30000, end: 50000},{start: 15000, end: 30000},
            {start: 5000, end: 15000},{start: 0, end: 5000},
          ],
          color: ['#0F305C', '#1F428E', '#27739B','#4E86B7', '#A2C6D8'],


        },

        //配置属性
        series: [{
          name: '数据',
          type: 'map',
          mapType: 'china',
          roam: true,
          label: {
            normal: {
              show: true,  //省份名称
              // position: ['50%', '50%']
              color:'#BBB',
              fontSize:8
            },
            emphasis: {
              show: false
            }
          },
          data:mydata, //数据
          // textStyle: {
          //   color: '#fff',
          // },
        }]
      };
      myChart.setOption(option);

      // -----------------------------------------------------------------
      // 响应式变化
      // window.addEventListener("resize", () => myChart.resize(), false);
    }
  }
};
</script>

<style lang="scss" scoped>
</style>
